<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <!-- 引入 echarts.js -->
    <script src="<%=path%>/static/js/echarts.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=rR137ElWogTtA8I7MRD1eumladqqg3GO"></script>
    <script type="text/javascript" src="<%=path%>/static/js/heatmap.min.js"></script>
    <link rel="stylesheet" href="<%=path%>/static/js/bootstrap-switch.min.css">
    <title>热力图功能示例</title>
    <style type="text/css">
        ul, li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-family: "微软雅黑";
        }

        .anchorBL {
            display: none;
        }

        #container {
            height: 100%;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
    <style>
        <style>
        body,html {
            overflow-x: hidden;
            overflow-y: hidden;
            width: 100%;
            height: 100%;
        }
        .loading{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 16px;
            padding-top: 280px;
            background-color:rgb(244, 243, 240);
        }
    </style>
</head>

<body onload="">


<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div>
    <div class="loading">
        加载中...
    </div>
    <div id="container">
    </div>

</div>
<script src="<%=path%>/static/js/jquery-3.2.0.min.js"></script>
<%--<script src="<%=path%>/static/js/map.js"></script>--%>
<script src="<%=path%>/static/js/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=glPyYQsTkNN6GaZRwAQKZMTR00eMi7ih"></script>
<script src="<%=path%>/static/js/bootstrap-switch.min.js"></script>
<script type="text/javascript">


    $(function () {
        var arr1 = [];
        var array = [];
        var t = 1;
        var mapCA = null;
        var mapCB = null;
        var heatmapOverlay = null;
        getList();


        function getList() {
            $.ajax({
                url: "<%=path%>/mlist?suggest="+parent.getSX(),
                cache: false,
                async: false,
                success: function (data) {

                    for (var m = 0; m < data.length; m++) {
                        var yuanx = parseFloat(data[m].longitude) + Math.sin((2 * Math.PI / 360) * (data[m].azimuth)) * 0.001;
                        var yuany = parseFloat(data[m].latitude) + Math.cos((2 * Math.PI / 360) * (data[m].azimuth)) * 0.001;

                        var obj1 = {};
                        obj1["lng"] = yuanx;
                        obj1["lat"] = yuany;
                        obj1["count"] = data[m].sumFlow/80;
                        obj1["azimuth"] = data[m].azimuth;
                        //console.log(data[m].Azimuth)
                        arr1.push(obj1);

                    }
                }
            })
            $.ajax({
                url: "<%=path%>/showMiddle?suggest="+parent.getSX(),
                cache: false,
                async: false,
                success: function (data) {
                    var max_lng = null;
                    var min_lng = null;
                    var max_lat = null;
                    var min_lat = null;
                    $.each(data.list, function (index, item) {
                        var obj = {};
                        obj['Longitude'] = item.longitude;
                        obj['Latitude'] = item.latitude;
                        obj['Azimuth'] = item.azimuth;
                        array.push(obj)

                        if (max_lng === null) {
                            max_lng = item.longitude
                        }
                        if (max_lat === null) {
                            max_lat = item.latitude
                        }
                        if (min_lng === null) {
                            min_lng = item.longitude
                        }
                        if (min_lat === null) {
                            min_lat = item.latitude
                        }

                        if (item.longitude > max_lng) {
                            max_lng = item.longitude
                        }
                        if (item.longitude < min_lng && item.longitude!=0) {
                            min_lng = item.longitude
                        }

                        if (item.latitude > max_lat) {
                            max_lat = item.latitude
                        }
                        if (item.latitude < min_lat && item.latitude!=0) {
                            min_lat = item.latitude
                        }
                    });
                    mapCA = (max_lng + min_lng) / 2;
                    mapCB = (max_lat + min_lat) / 2;

                    console.log(mapCA)
                    console.log(mapCB)
                }
            })
        }
        // 百度地图API功能
        var map = new BMap.Map("container");          // 创建地图实例
        var point = new BMap.Point(mapCA, mapCB);
        map.centerAndZoom(point, 14);             // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(); // 允许滚轮缩放
        var mapStyle = {
            features: ["road", "building", "water", "land"],//隐藏地图上的poi
//        style : "dark"  //设置地图风格为高端黑
            style: "googlelite"  //设置地图风格为高端黑
        };
        for (var i = 0; i < array.length; i++) {
            var obj = array[i];
            //alert(obj.Longitude+"==============="+obj.Latitude+"==============="+obj.Azimuth);
            sanjiao(parseFloat(obj.Longitude), parseFloat(obj.Latitude), parseInt(obj.Azimuth));
        }
        map.setMapStyle(mapStyle);
        var points = arr1

        if (!isSupportCanvas()) {
            alert('热力图目前只支持有canvas支持的浏览器,您所使用的浏览器不能使用热力图功能~')
        }
        heatmapOverlay = new BMapLib.HeatmapOverlay({"radius": 35});
        map.addOverlay(heatmapOverlay);
        heatmapOverlay.setDataSet({data: points, max: 100});
        $(function () {
            heatmapOverlay.show();
        });
        //x为x坐标,y为y坐标,A为角度
        function sanjiao(x, y, A) {
            var length = 0.002;//三角形边长
            var jiao = 15;//三角形顶点角的一半30代表30度
            var yuanx = x + Math.sin((2 * Math.PI / 360) * (A + jiao)) * length;
            var yuany = y + Math.cos((2 * Math.PI / 360) * (A + jiao)) * length;
            var yuanx2 = x + Math.sin((2 * Math.PI / 360) * (A - jiao)) * length;
            var yuany2 = y + Math.cos((2 * Math.PI / 360) * (A - jiao)) * length;
            var polygon = new BMap.Polygon([
                new BMap.Point(x, y),
                new BMap.Point(yuanx, yuany),
                new BMap.Point(yuanx2, yuany2),
            ], {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.2, fillOpacity: 0.2, fillColor: 'blue'});  //创建多边形
            map.addOverlay(polygon);
        }

        function closeHeatmap() {
            heatmapOverlay.hide();
        }

        closeHeatmap();
        function setGradient() {
            var gradient = {};
            var colors = document.querySelectorAll("input[type='color']");
            colors = [].slice.call(colors, 0);
            colors.forEach(function (ele) {
                gradient[ele.getAttribute("data-key")] = ele.value;
            });
            heatmapOverlay.setOptions({"gradient": gradient});
        }

        //判断浏览区是否支持canvas
        function isSupportCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }

        function UserControl() {
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10, 10);
        }
        UserControl.prototype = new BMap.Control();
        UserControl.prototype.initialize = function (map) {
            var div = document.createElement("div");
            div.appendChild(document.createTextNode("用户"));
            div.style.cursor = "pointer";
            div.style.border = "1px solid gray";
            div.style.backgroundColor = "white";
            div.style.padding = "0px 10px";
            div.onclick = function (e) {
                parent.changePage("showMiddle.jsp");
                window.location.href = "./showMiddle.jsp"
            };
            map.getContainer().appendChild(div);
            return div;
        }
        var myuserCtrl = new UserControl();
        map.addControl(myuserCtrl);

        function ZoomControl() {
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(70, 10);
        }
        ZoomControl.prototype = new BMap.Control();
        ZoomControl.prototype.initialize = function (map) {
            var div = document.createElement("div");
            div.appendChild(document.createTextNode("流量"));
            div.style.cursor = "pointer";
            div.style.border = "1px solid gray";
            div.style.backgroundColor = "white";
            div.style.color = 'red';
            div.style.padding = "0px 10px";
            div.onclick = function (e) {
                parent.changePage("showMiddle2.jsp");
                window.location.href = "./showMiddle2.jsp"
            };
            map.getContainer().appendChild(div);
            return div;
        }
        var myZoomCtrl = new ZoomControl();
        map.addControl(myZoomCtrl);

        function TlControl() {
            this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
            this.defaultOffset = new BMap.Size(10, 10);
        }
        TlControl.prototype = new BMap.Control();
        TlControl.prototype.initialize = function (map) {
            var img = document.createElement("img");
            img.src = '<%=path%>/static/img/tl1.png';
            img.style.width='24px';
            img.style.height='120px';
            map.getContainer().appendChild(img);
            return img;
        };
        var myTlCtrl = new TlControl();
        map.addControl(myTlCtrl);

        $('.loading').hide();

    })
</script>
</body>
</html>